<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>旋转按钮</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            div{
                width:600px;
                margin:20px auto;
            }
            li{
                list-style: none;
                margin:10px;
            }
            .clearfix:after{
                clear:both;
                content:"";
                display:table;
            }
            .fl{
                float:left;
            }
            li:hover{
                transform:rotate(360deg) scale(1.2);
                transition:all 0.5s linear;
            }

        </style>
    </head>
    <body>
        <div>
            <h1>顺时针旋转360度放大1.2倍</h1>
            <ul class="clearfix">
                <li class="fl"><a href="#"><img src="images/delicious.png"/></a></li>
                <li class="fl"><a href="#"><img src="images/facebook.png"/></a></li>
                <li class="fl"><a href="#"><img src="images/rss.png"/></a></li>
                <li class="fl"><a href="#"><img src="images/twitter.png"/></a></li>
                <li class="fl"><a href="#"><img src="images/yahoo.png"/></a></li>
            </ul>
        </div>

    </body>
</html>